<style>
	.left_title {
		position:absolute ;
		width:calc(29% - 5px); 
		height:9%;
		top:5px;
		left:8px;
		background-color:#bcdce5;
	}
	
	td{
		border : 1px solid ;
	}
	
	#dialog{
	    width: 400px;
	    height: 80%;
	    background-color: #ffffff;
	    position: absolute;
	    left: 50%;
	    top: 10%;
	    display: none ;
	}
	
	#userList a {
	    margin-left: 50px;
    	font-size: 20px;
	}
	
	#prePage {
		position: absolute;
		width: 60px;
	    height: 30px;
	    z-index: 99;
	    bottom: 0px ;
	    left : 130px ;
	}
	#nextPage {
		position: absolute;
		width: 60px;
	    height: 30px;
	    z-index: 99;
	    bottom: 0px ;
	    left: 230px ;
	}
	
</style>

<script src="/js/jquery-3.3.1.min.js"></script>

<html>
	<meta charset="UTF-8">
	
	<input type="button" id="prePage"  value="上一页"/>
	<input type="button" id="nextPage" value="下一页"/>

	<div id="left" style="width:29%;height:100%;background-color:#9aaee7;display: inline-block;">
	</div>
	
	<div id="right" style="width:70%;height:100%;background-color:#f3e9e9;display: inline-block;">
		<div id="dialog">
			<div style="margin:auto;position:relative;left:33%;cursor: pointer;" onclick="closeDialog();" >
				<a style="font-size: 60px;text-align: center;">关闭</a>
			</div>
			<div id="userList">
			</div>
		</div>
	
		<table id="bpmHistory" border="1" cellspacing="0" cellpadding="10">
			<thead>
				<tr>
					<td>序号</td>
					<td>任务名称</td>
					<td>任务创建时间</td>
					<td>处理时间</td>
					<td>候选人</td>
					<td>执行人</td>
					<td>处理状态</td>
					<td>备注/意见</td>
					<td>选择用户</td>
				</tr>
			</thead>
			
			<tbody id="bpmOptList">
			</tbody>
		</table>
	</div>

	

</html>

<script>
	var pageNum = 1 ;
	var pageSize = 10 ;
	var dbName = "" ;

	function closeDialog(){
		$("#dialog").hide() ;
	}
	
	$("#prePage").click(function(){
		if(pageNum == 1) return ;
		pageNum -- ;
		initList(pageNum , pageSize) ;
	});
	
	$("#nextPage").click(function(){
		pageNum ++ ;
		initList(pageNum , pageSize) ;
	});
	
	function showDetail(taskId , bizKey , instId){
		
		$("#bpmOptList").find("tr").remove() ;
		closeDialog() ;
		$.ajax({
			url:"/bpm/bpmTaskOpinion/"+instId+"/"+dbName,
			type:"GET",
			dataType: "json",
			async:false,
			success : function(result) {
				var lastIdx = -1 ;
				for(var i = 0 ; i < result.length ; i ++){
					var obj = result[i] ;
					if(typeof obj === "undefined") break ;
					lastIdx++ ;
				}
				for(var i = 0 ; i < result.length ; i ++){
					var obj = result[i] ;
					if(typeof obj === "undefined") continue ;
					$("#bpmOptList").append(
						"<tr>"
						+"	<td>"+(i+1)+"</td>"
						+"	<td>"+obj.task_name_+"</td>"
						+"	<td>"+obj.create_time_+"</td>"
						+"	<td>"+obj.approve_time_+"</td>"
						+"	<td>"+assignInfoFormat(obj.assign_info_)+"</td>"
						+"	<td>"+obj.approver_name_+"</td>"
						+"	<td>"+statusFormat(obj.status_)+"</td>"
						+"	<td>"+obj.opinion_+"</td>"
						+"	<td>"+selectUser("'"+obj.task_id_+"'" , i == lastIdx)+"</td>"
						+"</tr>	"	
					);
				} 
	        }  
		});
	}

	function selectUserDialog(taskId){
		document.getElementById("userList").innerText = '' ;
		$("#dialog").show() ;
		$.ajax({
			url:"/bpm/allAssigneeUser/"+taskId+"/"+dbName,
			type:"GET",
			dataType: "json",
			async:false,
			success : function(result) {
				for(var i = 0 ; i < result.length ; i ++){
					debugger ;
					$("#userList").append(
						'<a target="_blank" href="/bpm/jumpLogin/'+result[i].user_name+'/'+dbName+'">'+result[i].user_name+'('+result[i].real_name+')</a><br/>'		
					);
				} 
	        }  
		});
	}
	
	function selectUser(taskId , showFlag){
		if(!showFlag) return '' ;
		debugger ;
		return '<input type="button" onclick="selectUserDialog('+taskId+')" value="选择用户"/>';
	}
	
	function assignInfoFormat(assignInfo){
		if(assignInfo == '') return '' ;
		var assignArr = assignInfo.split('-') ;
		if(assignArr.length ==1) return assignInfo ;
		var prefix = "" ;
		if(assignArr[0]=='user') prefix = '[用户]' ;
		if(assignArr[0]=='role') prefix = '[角色]' ;
		return prefix + assignArr[1] ;
	}
	
	function statusFormat(status){
		if(status == null) return '待审批' ;
		if(status == 'start') return '申请' ;
		if(status == 'agree') return '同意' ;
		return '待审批' ;
	}
	
	$(document).ready(function() {
		var href = window.location.href; 
		var addressArr = href.split('/') ;
		dbName = addressArr[addressArr.length-1] ;
		initList(pageNum , pageSize) ;
	});
	
	function initList(pNum , pSize){
		var left = $("#left") ;
		$.ajax({
			url:"/bpm/mytodoList/"+ pNum + "/" + pSize + "/" +dbName,
			type:"GET",
			dataType: "json",
			async:false,
			success : function(result) {
				for(var i = 0 ; i < result.length ; i ++){
					if(i>=result.length)
						continue ;
					left.append('<div class="left_title" style="top:calc('+(i*10+1)+'% - 2px)" '
							+ 'taskId='+result[i].task_id_+' '
							+ 'bizKey='+result[i].biz_key_+' '
							+ 'onclick="showDetail(`'+result[i].task_id_+'`,`'+result[i].biz_key_+'`,`'+result[i].inst_id_+'`);"><a>'
							
							+ result[i].bpm_name_ + "--->" + result[i].name_
							+ '<br/>'
							+ result[i].subject_
							+ '<br/>'
							+ '创建时间: ' + result[i].create_time_
							+ '</a></div>') ;
				} 
	        }  
		});
	}
	
</script>